<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<body>
	<section class="content">
		<div class="row">
			<section class="col-md-7 connectedSortable">

				<div class="box box-primary">
					<div class="box-header">
						<i class="fa fa-bar-chart-o"></i>
						<h3 class="box-title">微博热门词汇</h3>
					</div>
					<div class="box-body ajax-load-url" ajax-url="${WebUrl}hot/chart/barChart.html"></div>
				</div>
				<div class="box">
					<div class="box-header">
						<h3 class="box-title">Bordered Table</h3>
					</div>
					<!-- /.box-header -->
					<div class="box-body">
						<table class="table table-bordered">
							<tr>
								<th style="width: 10px">#</th>
								<th>Task</th>
								<th>Progress</th>
								<th style="width: 40px">Label</th>
							</tr>
							<tr>
								<td>1.</td>
								<td>Update software</td>
								<td>
									<div class="progress xs">
										<div class="progress-bar progress-bar-danger"
											style="width: 55%"></div>
									</div>
								</td>
								<td><span class="badge bg-red">55%</span></td>
							</tr>
							<tr>
								<td>2.</td>
								<td>Clean database</td>
								<td>
									<div class="progress xs">
										<div class="progress-bar progress-bar-yellow"
											style="width: 70%"></div>
									</div>
								</td>
								<td><span class="badge bg-yellow">70%</span></td>
							</tr>
							<tr>
								<td>3.</td>
								<td>Cron job running</td>
								<td>
									<div class="progress xs progress-striped active">
										<div class="progress-bar progress-bar-primary"
											style="width: 30%"></div>
									</div>
								</td>
								<td><span class="badge bg-light-blue">30%</span></td>
							</tr>
							<tr>
								<td>4.</td>
								<td>Fix and squish bugs</td>
								<td>
									<div class="progress xs progress-striped active">
										<div class="progress-bar progress-bar-success"
											style="width: 90%"></div>
									</div>
								</td>
								<td><span class="badge bg-green">90%</span></td>
							</tr>
						</table>
					</div>
					<!-- /.box-body -->
					<div class="box-footer clearfix">
						<ul class="pagination pagination-sm no-margin pull-right">
							<li><a href="#">&laquo;</a></li>
							<li><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">&raquo;</a></li>
						</ul>
					</div>
				</div>
				<!-- /.box -->
			</section>
			<section class="col-md-5 connectedSortable"></section>
		</div>
	</section>
<script type="text/javascript">
	$(function() {
		$(".connectedSortable").sortable({
			placeholder : "sort-highlight",
			connectWith : ".connectedSortable",
			handle : ".box-header, .nav-tabs",
			forcePlaceholderSize : true,
			zIndex : 999999
		}).disableSelection();
	});
</script>
</body>
</html>
